<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery metro拖动菜单代码 - 16素材网</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<link rel="stylesheet" type="text/css" media="all" href="css/metro.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.plugins.min.js"></script>
<script type="text/javascript" src="js/metro.js"></script>

</head> 

<body>

<div class="metro-layout horizontal">

	<div class="header">
	
		<h1>类似智能手机的滑动导航</h1>
	
		<div class="controls">
			<span class="down" title="Scroll down"></span>
			<span class="up" title="Scroll up"></span>
			<span class="next" title="Scroll left"></span>
			<span class="prev" title="Scroll right"></span>
			<span class="toggle-view" title="Toggle layout"></span>
		</div>
		
	</div>

	<div class="content clearfix">
	
		<div class="items">
			<a class="box" href="#"><span>Mail</span><img class="icon" src="images/mail.png" alt="" /></a>
			<a class="box" href="#" style="background: #6b6b6b;"><span>Settings</span><img class="icon" src="images/settings.png" alt="" /></a>
			<a class="box" href="#" style="background: #43b51f;"><span>Make a call</span><img class="icon" src="images/phone.png" alt="" /></a>
			<a class="box width2 height2" href="http://www.16sucai.com/"><span>Photos</span><img class="cover" src="images/gallery.jpg" alt="" /></a>
			<a class="box" href="#" style="background: #00aeef;"><span>Music</span><img class="icon" src="images/music.png" alt="" /></a>
			<a class="box" href="#" style="background: #f58d00;"><span>Firefox</span><img class="icon" src="images/firefox.png" alt="" /></a>
			<a class="box" href="#" style="background: #640f6c;"><span>Yahoo</span><img class="icon" src="images/yahoo.png" alt="" /></a>
			<a class="box height2" href="#" style="background: #d32c2c;"><span>GMail</span><img class="icon big" src="images/gmail.png" alt="" /></a>
			<a class="box" href="#" style="background: #3c5b9b;"><span>Facebook</span><img class="icon" src="images/facebook.png" alt="" /></a>
			<a class="box" href="#" style="background: #ffc808;"><span>Winamp</span><img class="icon" src="images/winamp.png" alt="" /></a>
			<a class="box" href="#" style="background: #00a9ec;"><span>Tasks</span><img class="icon" src="images/tasks.png" alt="" /></a>
			<a class="box height2" href="#" style="background: #4c5e51;"><span>DeviantART</span><img class="icon big" src="images/deviantart.png" alt="" /></a>
			<a class="box" href="#" style="background: #f874a4;"><span>Dribbble</span><img class="icon" src="images/dribbble.png" alt="" /></a>
		</div>
	
	</div>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.16sucai.com/" target="_blank">16素材网</a></p>
</div>
</body>
</html>